<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s"  uri="/struts-tags" %>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
   	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <link href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="<%=request.getContextPath()%>/js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.js" type="text/javascript"></script>  
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrapValidator.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrapValidator.js"></script>
    <script src="<%=request.getContextPath()%>/js/jquery.twbsPagination.js" type="text/javascript"></script>   
    <script type="text/javascript">
    
    $(document).ready(function () {
	    $('#pagination-demo').twbsPagination({	    	
	        totalPages: ${pageCount},
	        visiblePages: ${pageCount}>10?10:${pageCount},
			startPage:${page},
	        version: '1.1',
	        first: "首页",
	        last: "未页",
	        prev: '上一页',
	        next: '下一页',
	        onPageClick: function (event, page) {	        	
	        	if(page!=${page}){
	        		location.href="<%=request.getContextPath()%>/categoryMapping/categoryMapping_listByPage?t1.category4stId="+${t1.category4stId}+"&page="+ page +"&rows=10";
	        	}	        	
	        }
	    });
    });
    
	//显示添加分类映射的模态框
    function showAddModal(){
    	$('#myModal').modal({keyboard: true});
    	$('#myModalLabel').html("添加分类映");
    	$("#saveBtn").attr("onclick","addCategoryMapping()");
    }
    //添加
    function addCategoryMapping() {
    	var supplierName = $("#supplierName").val();
    	var categoryName = $("#categoryName").val();
    	var categoryId = ${t1.category4stId};
    	//alert(supplierName+categoryName)
		$.ajax({
			url:"<%=request.getContextPath()%>/categoryMapping/categoryMapping_addCategoryMapping",
			//type:'post',
			dataType:'json',
			data:{
				'categoryMapping.supplierName':supplierName,
				'categoryMapping.supplierCategoryName':categoryName,
				'categoryMapping.category4stId':categoryId
			},
			success:function(value){
				alert(value.message);
				if(value.success==true){
					location.href="<%=request.getContextPath()%>/categoryMapping/categoryMapping_listByPage?t1.category4stId="+categoryId;
				}
			}
		});
	}
    
    //删除
    function deleteMapping(id){
    	var categoryId = ${t1.category4stId};
    	if(confirm("确定要删除吗？")){
    		location.href="<%=request.getContextPath()%>/categoryMapping/categoryMapping_delete?id="+id+"&t1.category4stId="+categoryId;
    	}
    }
    
    //弹出修改模态框
    function showUpdateModal(id,supplierName,categoryName){
    	$("#supplierName").val(supplierName);
    	$("#categoryName").val(categoryName);
    	$('#myModalLabel').html("修改分类映");
    	$("#saveBtn").attr("onclick","updateMapping("+id+")");
    	$('#myModal').modal({keyboard: true});
    }
    
    //修改
    function updateMapping(id){
    	var supplierName = $("#supplierName").val();
    	var categoryName = $("#categoryName").val();
    	var categoryId = ${t1.category4stId};
    	location.href="<%=request.getContextPath()%>/categoryMapping/categoryMapping_update?t1.category4stId="+${t1.category4stId}+
    			"&t.id="+id+"&t.supplierName="+supplierName+"&t.supplierCategoryName="+categoryName+"&t.category4stId="+categoryId;
    	<%-- $.ajax({
			url:"<%=request.getContextPath()%>/categoryMapping/categoryMapping_update?t1.category4stId="+${t1.category4stId},
			type:'post',
			dataType:'json',
			data:{
				't.id':id,
				't.supplierName':supplierName,
				't.supplierCategoryName':categoryName,
				't.category4stId':categoryId
			},
			success
		}); --%>
    }
    
    </script>
</head>

<body>

<div class="panel panel-primary">
  <div class="panel-heading">商品分类映射 </div>
  <br>
  &nbsp; &nbsp; &nbsp;
  	<button type="button" onclick="showAddModal()" class="btn btn-default">增加</button>

  <div class="panel-body"></div>

		<table class="table table-bordered table-hover">
				<tr>
					 <th>供应商名称</th>
					 <th>分类名称</th>
					 <th>操作</th>
			        
			    </tr>
		    <s:iterator value="#list">
			    <tr>
					 <td>${supplierName }</td>
					 <td>${supplierCategoryName }</td>
					 <td><a class="btn btn-primary btn-sm" onclick="showUpdateModal('${id }','${supplierName }','${supplierCategoryName }')" role="button" >修改</a>
					 <a class="btn btn-primary btn-sm" onclick="deleteMapping(${id })" role="button" >删除</a></td>
			        
			    </tr>        
		    </s:iterator>
		</table>
</div>
<section id="main-content">
    <p>
        <div class="text-center" display="inline">
            <ul id="pagination-demo" class="pagination-sm">&nbsp;&nbsp;&nbsp;共${pageCount}页,共${recordsCount}条记录</ul>
        </div>
    </p>
</section>

<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	                <h4 class="modal-title" id="myModalLabel">添加分类映射</h4>
	            </div>
	            <div class="modal-body" style="text-align: center">
	            	<form id="">
		            	<div id="childDiv">
			            	<label>供应商名称：</label><input id="supplierName" type="text">
		            	<br><br>
		            	</div>
		            	<div id="selfDiv">
			            	&nbsp;&nbsp;&nbsp;<label>分类名称：</label><input type="text" id="categoryName">
		            	</div><br><br>
		            	<button id="saveBtn" onclick="addCategoryMapping()" type="button" class="btn btn-primary">保存</button>
	            	</form>
	            </div>
	            <input type="hidden" id="nodeId">
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
		
</body>
</html>
